import React from 'react';
import { View, ImageBackground, Image, TouchableOpacity } from 'react-native';
import { Flex, Slider, Modal } from 'antd-mobile-rn';
import { createStyles } from '../../../utils/view';
import CText from '../../../components/CText';

const timeCal = (time, ndate) => {
  let d1 = time.replace(/\-/g, '/');
  let sdate = new Date(d1);
  if ((sdate - ndate) > 0) {
    return formatSeconds((sdate - ndate) / 1000);
  } else {
    return 0;
  }
};

const buy = async (cfid, joinIco) => {
  Modal.prompt(
    '众筹',
    '6w积分以上才能参与众筹',
    (size: any) => {
      joinIco({ cfid, size });
    },
    'default',
    null,
    ['请输入您需要众筹的数额'],
  );
};

const formatSeconds = (value: number) => {
  let secondTime = parseInt(value);// 秒
  let minuteTime = 0;// 分
  let hourTime = 0;// 小时
  if (secondTime > 60) { // 如果秒数大于60，将秒数转换成整数
    // 获取分钟，除以60取整数，得到整数分钟
    minuteTime = parseInt(secondTime / 60);
    // 获取秒数，秒数取佘，得到整数秒数
    secondTime = parseInt(secondTime % 60);
    // 如果分钟大于60，将分钟转换成小时
    if (minuteTime > 60) {
      // 获取小时，获取分钟除以60，得到整数小时
      hourTime = parseInt(minuteTime / 60);
      // 获取小时后取佘的分，获取分钟除以60取佘的分
      minuteTime = parseInt(minuteTime % 60);
    }
  }
  let result = String((secondTime >= 10) ? secondTime : `0${secondTime}`) + '秒';

  if (minuteTime > 0) {
    result = String((minuteTime >= 10) ? minuteTime : `0${minuteTime}`) + '分' + result;
  }
  if (hourTime > 0) {
    result = String(parseInt(hourTime)) + '小时' + result;
  }
  return result;
};

const GoodsItem = ({ data, ndate, joinIco }) => {
  const { id, img, title, limit_buy, start_time, unit_price, size, release_rate } = data;
  const time = timeCal(start_time, ndate);
  return (
    <View style={styles.wrapper}>
      <View style={styles.item}>
        <Flex direction="row" align="center" style={styles.prod_box}>
          <Image source={{ uri: img }} style={styles.prod_img} />
          <Flex direction="column" justify="between" align="start" style={styles.prod_height}>
            <CText size="30" color="#111111">{title}</CText>
            <CText size="22" color="#888888">每个ID限购{limit_buy}枚</CText>
            <CText size="22" color="#980000">内容释放比例：50%</CText>
          </Flex>
          <View style={styles.prod_date}>
            <CText size="24" color="#111111">{start_time}</CText>
          </View>
        </Flex>
      </View>
      <View style={styles.price_box}>
        <Flex direction="row" justify="between" align="center" >
          <Flex direction="column" justify="between" align="center" >
            <CText size="30" color="#111111">众筹数量</CText>
            <View style={styles.price_text_top}></View>
            <CText size="24" color="#980000">{size}</CText>
          </Flex>
          <Flex direction="column" justify="between" align="center" >
            <CText size="30" color="#111111" style={styles.price_text_top}>价格</CText>
            <View style={styles.price_text_top}></View>
            <CText size="24" color="#980000">1CC币={unit_price}</CText>
          </Flex>
          <Flex direction="column" justify="between" align="center" >
            <CText size="30" color="#111111" style={styles.price_text_top}>剩余时间</CText>
            <View style={styles.price_text_top}></View>
            <CText size="24" color="#980000">{time}</CText>
          </Flex>
        </Flex>
      </View>
      {/* 滑动条 */}
      <Flex direction="row" style={styles.buy_box}>
        <View style={styles.slide_box}>
          <Slider
            value={release_rate}
            min={0}
            max={100}
            disabled={true}
            maximumTrackTintColor="#ccc"
            minimumTrackTintColor="#C9A43C"
            step={1}
          />
        </View>
        <Flex direction="row" align="center" justify="between" style={{ flex: 1 }}>
          <CText size="#111111">{release_rate}%</CText>
          <TouchableOpacity onPress={() => buy(id, joinIco)}>
            <ImageBackground style={styles.btn_buy} resizeMode="cover" source={require('../../../assets/img/home/btn_buy.png')}>
              <CText size="28" color="#5F4601">购买</CText>
            </ImageBackground>
          </TouchableOpacity>
        </Flex>
      </Flex>
    </View>
  );
};

let styles = {
  wrapper: {
    marginBottom: 40,
  },
  item: {
    paddingHorizontal: 24,
    paddingVertical: 20,
    marginBottom: 32,
  },
  prod_box: {
    height: 128,
  },
  prod_img: {
    width: 128,
    height: 128,
    borderRadius: 64,
    marginRight: 20,
  },
  prod_height: {
    height: 128,
  },
  prod_date: {
    position: 'absolute',
    top: 0,
    right: 0,
  },
  price_box: {
    paddingHorizontal: 82,
  },
  price_text_top: {
    height: 38,
  },
  buy_box: {
    paddingHorizontal: 28,
    marginTop: 20,
  },
  slide_box: {
    width: 440,
    marginRight: 30,
  },
  btn_buy: {
    width: 128,
    height: 48,
    borderRadius: 24,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 20,
  }
};

styles = createStyles(styles);
export default GoodsItem;